<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>减一减 | 完善信息</title>
    <link rel="stylesheet" type="text/css" href="src/frozenui/1.2.0/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="src/static/demo.css">
    <style type="text/css">
    h2 center {
        font-weight: bold;
    }
    .info-box {
        margin: 30px 10px 50px 10px;
    }
    #head {
        margin-top: 30px;
    }
    .ui-avatar-one {
        width: 100px;
        height: 100px;
    }
    .ui-avatar-one span {
        width: 100px;
        height: 100px;
    }
    .ui-switch input:before {
        background-color: #18b4ed;
    }
    .ui-switch input:checked:before {
        box-shadow: #f75549 0 0 0 16px inset;
        border: 1px solid #dfdfdf;
    }
    </style>
</head>
<body>
<!-- 信息补全页开始 -->
<div id="completeinfo">
    <h2 class="title ui-border-b">
        <center class="male-title">完善信息</center>
    </h2>
    <div class="content">
        <center>
            <div id="head" class="ui-avatar-one">
                <span id="male" style="background-image:url(src/img/male.png)"></span>
                <span id="female" style="background-image:url(src/img/female.png); display: none"></span>
            </div>
        </center>
        <div class="info-box">
            <div class="ui-form">
                <div class="ui-form-item ui-border-b">
                    <label for="nickname">UID</label>
                    <input type="text" name="uid" id="uid" autocomplete="off" readonly value="1" />
                </div>
                <div class="ui-form-item ui-border-b">
                    <label for="nickname">手机号码</label>
                    <input type="text" name="phone" id="phone" autocomplete="off" readonly value="18888888888" />
                </div>
                <div class="ui-form-item ui-border-b">
                    <label for="nickname">昵称</label>
                    <input type="text" name="nickname" id="nickname" autocomplete="off" />
                    <a id="close" class="ui-icon-close"></a>
                </div>
                <div class="ui-form-item ui-border-b">
                    <label for="nickname">生日</label>
                    <input type="text" name="birthday" id="birthday" autocomplete="off" />
                    <a id="close" class="ui-icon-close"></a>
                </div>
                <div class="ui-form-item ui-border-b">
                    <label for="nickname">性别</label>
                    <input type="text" name="sex" id="sex" autocomplete="off" value="男生" readonly />
                    <label for="#" class="ui-switch">
                    <input type="checkbox" id="sex-btn"></label>
                </div>
                <div class="ui-btn-wrap">
                    <button class="ui-btn-lg ui-btn-primary" id="confirm">确认</button>
                </div>        
            </div>

        </div>
    </div>
</div>
<!-- 信息补全页结束 -->


        
    <!-- javascript开始 -->
    <script src="src/frozenjs/lib/zepto.min.js"></script>
    <script src="src/frozenjs/1.0.1/frozen.js"></script>
    <script>
    $(document).ready(function(){
        //获取uid
        var uid = document.cookie.split("=")[1];
        //设置性别
        $("#sex-btn").click(function(){
            if($("#sex").val() === '男生'){
                $("#sex").val('女生');
                $("h2 > center").css("color", "#fd7271");
                $("#confirm").removeClass("ui-btn-primary");
                $("#confirm").addClass("ui-btn-danger");
                $("#male").hide();
                $("#female").show();
            }else{
                $("#sex").val('男生');
                $("h2 > center").css("color", "#00A5E3");
                $("#confirm").removeClass("ui-btn-danger");
                $("#confirm").addClass("ui-btn-primary");
                $("#female").hide();
                $("#male").show();
            }
        })

    })
    </script>
</body>
</html>